<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ai象棋机器人</title>
<style>
body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: flex-start; /* 默认为flex-start，或者你可以不设置这一行 */
    background-color:#000;
    background-position: center;
    background-image: url('背景.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: relative; /* 使子元素的绝对定位相对于body */
}
#centered-container {
    position: absolute;
    top: 60%; /* 距离顶部60% */
    left: 50%; /* 距离左侧40% */
    transform: translate(-50%, -50%); /* 使容器中心对准指定位置 */
    display: flex;
    flex-direction: column;
    align-items: center;
}
#globallink {
    height: 40px;
    background-color: #FFC;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 设置li之间的间距 */
}
#globallink li {
    text-align: center;
    line-height: 40px;
    float: none; /* 移除浮动 */
}
#textInput {
    width: 200px; /* 或其他适当的宽度 */
    box-sizing: border-box;
}
</style>
</head>
<body>
<div id="centered-container">
    <ul id="globallink">
        <li>请输入连接</li>
        <li><input type="text" id="textInput" name="textInput"></li>
        <li><a href="准备界面.html">确定</a></li>
    </ul>
</div>
</body>
</html>